<template>

  <div class="footer">
    <div class="footer-info">
      <ul>
        <li>
          <div class="userinfo-educational footer-info-userinfo">
            <h2>Educational background information</h2><br>
            <p>
              Diligent in work, positive and upward, during the tenure, without any bad behavior, and received multiple leadership commendations
              Praise.
              Serious work attitude, strong self-learning ability, hardworking, skilled in communication skills, and good interpersonal skills
              Manage relationships among colleagues, strive to improve skills in their spare time, and make up for themselves
              Disadvantages: comprehensively improving personal abilities and enhancing work efficiency brings more benefits to the company.
            </p><br>
            <div>
              <img src="/public/icons/user-line.svg" alt="user">
              <p>Lin</p>
            </div>
            <div>
              <img src="/public/icons/phone-line.svg" alt="phone">
              <p>15112684099</p>
            </div>
            <div>
              <img src="/public/icons/mail-line.svg" alt="mail">
              <p>Lin_X1999@outlook.com</p>
            </div>
            <div>
              <img src="/public/icons/map-pin-line.svg" alt="map">
              <p>Yijia New village, Nanshan District, Shenzhen</p>
            </div>
            <div>
              <img src="/public/icons/macbook-fill.svg" alt="macbook">
              <p>Operation and maintenance development engineer</p>
            </div>
            <div>
              <img src="/public/icons/money-cny-box-line.svg" alt="money">
              <a herf="#" style="color: red; cursor: pointer; margin-left: 14px;" class="salary" >Salary Expectation: 20K</a>
            </div>
            <div style="margin-bottom: 20px;">
              <img src="/public/icons/school-line.svg" alt="school">
              <p>School: Lanzhou University and Shenzhen University</p>
            </div>
          </div>

          <footer>
            <div class="footer-group">
              <a href="https://www.facebook.com/"><img src="/public/icons/facebook.svg" alt="facebook"></a>
              <a href="https://gitee.com/Lin_X1999/vue"><img src="/public/icons/github-line.svg" alt="instagram"></a>
              <a href="https://twitter.com/"><img src="/public/icons/twitter.svg" alt="twitter"></a>
            </div>
          </footer>
        </li>

        <li>
          <el-form :model="sendForm"
                   autocomplete="on"
          >
            <div class="userinfo-educational footer-info-userinfo footer-info-userinfo-contact">
              <h2>CONTACT</h2><br>
              <ul style="display: flex; justify-content: space-evenly; align-items: center; margin-bottom: 25px;">
                <li>
                  <p style="margin: 5px 0">Input your name</p>
                  <el-form-item prop="username"
                  >
                    <el-input v-model="sendForm.username" style="width: 240px;" required placeholder="Please your name" />
                  </el-form-item>
                </li>
                <li>
                  <p style="margin: 5px 0">Input your email</p>
                  <el-form-item prop="email">
                    <el-input v-model="sendForm.email" style="width: 240px" required placeholder="Please your email" />
                  </el-form-item>
                </li>
              </ul>
              <li>
                <p style="margin: 5px 0">Input your message</p>
                <el-form-item prop="message">
                  <el-input type="textarea"  v-model="sendForm.message" clearable  size="large" rows="7" placeholder="Please your message" style="margin-bottom: 25px;"/>
                </el-form-item>
              </li>
              <el-button  size="large" style="width: 150px;" class="submit" @click="handleEmail" >SUBMIT NOW</el-button>
            </div>
          </el-form>
        </li>
      </ul>
    </div>
  </div>

</template>



<script lang="ts">
import { gsap } from 'gsap'
import {ContactEmail} from '@/utils/api'

export default defineComponent ({
  setup(){
    const data = reactive({
      sendForm: {
        username: '',
        email: '',
        message: ''
      },
      timer: ref()
    })

    // 实例化路由对象
    const routers = useRouter()
    const pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/


     // 防抖函数，防止执行多次函数
     const debounce = (func: { (): void; apply?: any; }, delay: number | undefined) => {
      data.timer = null;
      return () => {
          clearTimeout(data.timer);
          data.timer = setTimeout(() => {
              func.apply(this, arguments);
          }, delay);
      };
    }


    const handleEmail = async() => {
      if(data.sendForm.username && data.sendForm.email && data.sendForm.message){
        if(pattern.test(data.sendForm.email)){
            await ContactEmail({
              'username': data.sendForm.username,
              'email': data.sendForm.email,
              'message': data.sendForm.message
            }).then(res => {
              ElMessage({
                message: res.value.message,
                type: 'success',
                duration: 1000,
                center: true,
              })
            })
        }
        else {
          ElMessage({
            message: 'Email format error!',
            type: 'error',
            duration: 1000,
            center: true,
          })
        }
      }
      else{
        ElMessage({
          message: 'Please fill in the form',
          type: 'error',
          duration: 1000,
          center: true,
        })
      }
    }

    
    return {
      ...toRefs(data),
      handleEmail
    }

  }

})

</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
}

.el-input__wrapper {
    background-color: transparent !important;
}

.footer {
  position: relative;
  top: 0;
  left: 0;
  height: 500px;
  width: 100%;
  border-top: 1px solid black;
  filter: invert(1);
  visibility: hidden;
}

.footer .footer-info {
  display: flex;
  align-items: center;
  top: 0;
}


.footer .footer-info-userinfo {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  filter: invert(1);
}


.footer-info-userinfo div {
  display: flex;
  justify-content: start;
  line-height: 25px;
}

.footer .footer-info-userinfo img {
  height: 17px;
  filter: invert(1);
  margin-right: 1rem;
  align-self: center;
  cursor: pointer;
}

.footer .footer-info {
  display: grid;
  height: 600px;
  width: auto;
}

.footer .footer-info ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.footer .footer-info ul li {
  height: auto;
  width: 600px;
}


.submit {
  transition: transform 1s, background-position 0.5s, color 0.3s;
  background: none;
}

.submit:hover {
  color: transparent;
  font-weight: bold;
  background: linear-gradient(to right, #00CCFF, yellow, green, violet);
  background-size: 200% 100%; /* 背景大小设置为200%宽度，以便移动 */
  background-clip: text; /* 将背景仅剪裁到文字 */
  cursor: pointer; /* 鼠标悬停时显示指针形状 */
  -webkit-background-clip: text; /* Chrome/Safari 兼容 */
  -webkit-text-fill-color: transparent; /* 使文字颜色透明，显示背景 */
  background-position: left;
}


.footer-group a:not(:last-child) {
  margin-right: var(--footer-margin-right);
}

.footer-group a img:hover {
  transform: translateY(-0.5em);
}

.footer-info-userinfo img:hover {
  transform: scale(1.3);
  transition: all 0.5s ease;
}

.footer-group a img{
  width: 1.3rem;
  transition: all 0.5s ease;
}

</style>